<template>
  <!-- tab组件-->
  <div>
    <!-- 审批弹框 -->
    <el-tabs v-model="activeName" style="height: 400px">
      <el-tab-pane
        v-if="saveTitles.list[0].show"
        :label="saveTitles.list[0].title"
        name="first"
      >
        <el-form
          ref="saveForm"
          :model="saveForm"
          label-width="110px"
          label-position="left"
          :rules="saveFormRules"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="流程名称：">
                <el-input v-model="saveForm.processDefName" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="任务名称：">
                <el-input v-model="saveForm.taskDefName" readonly />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="审批意见：" prop="resultFlag">
                <el-select
                  v-model="saveForm.resultFlag"
                  placeholder="请选择"
                  style="width: 100%"
                  @change="changeResultFlag"
                >
                  <el-option
                    v-for="item in resultFlagList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注：" prop="taskComment">
                <el-input
                  v-model="saveForm.taskComment"
                  show-word-limit
                  type="textarea"
                  maxlength="120"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <!-- <el-form-item
                v-if="saveForm.resultFlag == '1'"
                key="nextTaskList"
                label="流转节点："
                prop="forward"
              >
                <el-select
                  v-model="saveForm.forward"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in nextTaskList"
                    :key="item.activityCode"
                    :label="item.activityName"
                    :value="item.activityCode"
                  />
                </el-select>
              </el-form-item> -->
              <el-form-item
                v-if="saveForm.resultFlag == '0'"
                key="prevTaskList"
                label="流转节点："
                prop="forward"
              >
                <el-select
                  v-model="saveForm.forward"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in prevTaskList"
                    :key="item.activityCode"
                    :label="item.activityName"
                    :value="item.activityCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item
                v-if="saveForm.resultFlag == '1' && activityType(saveForm.forward)"
                label="审批人："
                prop="userNameString"
              >
                <el-input
                  v-model="saveForm.userNameString"
                  readonly
                  clearable
                  style="width: 70%; display: inline-block; margin-right: 10px"
                />
                <el-button
                  icon="el-icon-plus"
                  style="display: inline-block"
                  @click="showAddresseeList"
                >选择</el-button>
                <p style="color: rgb(255, 119, 0)">
                  * 如果审批人无人可选，请及时联系流程管理员！
                </p>
              </el-form-item>
              <el-col />
              <el-dialog
                v-dialogDrag
                title="审批人"
                :visible.sync="approverVisible"
                width="50%"
                append-to-body
              >
                <approverTable
                  ref="approverTable"
                  @approverClose="approverClose"
                  @approverEvent="approverEvent"
                />
              </el-dialog>
            </el-col> -->
          </el-row>
        </el-form>
      </el-tab-pane>
      <!-- 历史记录 -->
      <el-tab-pane
        v-if="saveTitles.list[1].show"
        :label="saveTitles.list[1].title"
        name="second"
      >
        <div>
          <el-table
            ref="multipleTableHistory"
            :data="tableDataHistory"
            max-height="400px;"
          >
            <el-table-column
              prop="taskDefName"
              label="任务名称 "
              show-overflow-tooltip
            />

            <el-table-column
              prop="processDefName"
              label="流程名称"
              show-overflow-tooltip
            />
            <el-table-column
              prop="taskApproverUserName"
              label="审批人"
              show-overflow-tooltip
            />
            <el-table-column
              prop="taskApproverOrgName"
              label="所属部门"
              show-overflow-tooltip
            />
            <el-table-column
              prop="finishedTm"
              label="审批时间"
              sortable
              show-overflow-tooltip
              :formatter="(row) => row.finishedTm || '-'"
            />
            <el-table-column prop="taskResult" label="是否通过" sortable>
              <template slot-scope="scope">
                <div v-if="scope.row.taskResult == 1">
                  <i class="startState" /><span>通过</span>
                </div>
                <div v-if="scope.row.taskResult == 0">
                  <i class="unStartState" /><span style="color: red"
                    >不通过</span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="taskComment"
              label="审批意见"
              :formatter="(row) => row.taskComment || '-'"
            />
          </el-table>
        </div>
      </el-tab-pane>
      <!-- 流程图 -->
      <el-tab-pane
        v-if="saveTitles.list[2].show"
        :label="saveTitles.list[2].title"
        name="third"
      >
        <div>
          <img
            :src="'data:image/png;base64,' + imgSrc"
            style="width: 70%; height: 100%"
            alt="正在获取审批进度"
          />
        </div>
      </el-tab-pane>
      <!-- 业务表单 -->
      <el-tab-pane
        v-if="this.rowData.businessKey && this.rowData.processVariables.bizUrl"
        :label="saveTitles.list[3].title"
        name="four"
      >
        <div>
          <iframe
            scrolling="auto"
            frameborder="0"
            style="width: 100%; height: 400px"
            :src="this.bizUrl"
          ></iframe>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import approverTable from "@/views/workFlow/components/approver";
import { workflow } from "@/api/index";
export default {
  components: {
    approverTable,
  },
  props: {
    saveTitles: {
      type: Object,
      default: () => {
        return {
          list: [
            {
              title: "任务审批",
              show: false,
            },
            {
              title: "审批历史",
              show: true,
            },
            {
              title: "流程进度图",
              show: true,
            },
            {
              title: "业务表单",
              show: false,
            },
          ],
          activeName: "first",
        };
      },
    },
    businessKey: {
      type: String,
      default: "",
    },
    processInstanceId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      rowData: {},
      bizUrl: "", // iframe嵌套的地址
      prevTaskList: [],
      nextTaskList: [],
      approverVisible: false, // 评审弹窗显示标识
      tableDataHistoryVisible: false, // 历史显示标识
      activeName: "first",
      tableDataHistory: [],
      imgSrc: "",
      saveForm: {
        processDefName: "",
        taskDefName: "",
        forward: "",
        resultFlag: "",
        taskComment: "",
        taskIds: "",
        userNameString: "",
      },
      saveFormRules: {
        resultFlag: [
          { required: true, message: "请选择审批意见", trigger: "blur" },
        ],
        forward: [{ required: true, message: "请选择节点", trigger: "blur" }],
        userNameString: [
          { required: true, message: "请选择审批人", trigger: "blur" },
        ],
        taskComment: [{ validator: this.taskCommentVaild, trigger: "blur" }],
      },
      resultFlagList: [
        {
          value: "1",
          label: "通过",
        },
        {
          value: "0",
          label: "驳回",
        },
      ],
    };
  },
  computed: {},
  watch: {
    activeName() {
      this.$emit("buttonSign", this.activeName);
    },
  },
  created() {},
  mounted() {},
  methods: {
    activityType(val) {
      if (val) {
        var type = {};
        type = this.nextTaskList.find((v) => v.activityCode === val);
        if (type.activityType === "endEvent") {
          return 0;
        } else {
          return 1;
        }
      }
    },
    init() {
      this.bizUrl = "";
      for (const key in this.saveForm) {
        this.saveForm[key] = "";
      }
      if (this.$refs.saveForm) {
        this.$refs.saveForm.clearValidate();
      }
      let params = {
        businessKey: this.businessKey,
        processInstanceId: this.processInstanceId,
      };
      console.log(this.saveTitles.list[0].show,'this.saveTitles.list[0].show')
      if(this.saveTitles.list[0].show) {
         workflow.queryForTaskTaskInstance(params).then((res) => {
        if (res.code == 200) {
          this.rowData = res.data;
          this.saveForm.processDefName = this.rowData.processDefName;
          this.saveForm.taskDefName = this.rowData.taskDefName;
          this.nextTaskList = this.rowData.nextTask;
          this.prevTaskList = this.rowData.prevTask;
          if (this.rowData.processVariables != undefined) {
            if (this.rowData.processVariables.bizUrl != undefined) {
              if (
                this.rowData.businessKey &&
                this.rowData.processVariables.bizUrl
              ) {
                let href =
                  window.location.href.split("#")[0] +
                  "#" +
                  this.rowData.processVariables.bizUrl +
                  "?businessKey=" +
                  this.rowData.businessKey;
                this.bizUrl = href;
                console.log(this.bizUrl, "this.bizUrl");
              }
            }
          }
        } else {
          this.$message.error(res.message || "失败");
        }
      });
      } else {
         workflow.processInstanceQueryForInst(params).then((res) => {
        if (res.code == 200) {
          this.rowData = res.data;
          // this.saveForm.processDefName = this.rowData.processDefName;
          // this.saveForm.taskDefName = this.rowData.taskDefName;
          // this.nextTaskList = this.rowData.nextTask;
          // this.prevTaskList = this.rowData.prevTask;
          if (this.rowData.processVariables != undefined) {
            if (this.rowData.processVariables.bizUrl != undefined) {
              if (
                this.rowData.businessKey &&
                this.rowData.processVariables.bizUrl
              ) {
                let href =
                  window.location.href.split("#")[0] +
                  "#" +
                  this.rowData.processVariables.bizUrl +
                  "?businessKey=" +
                  this.rowData.businessKey;
                this.bizUrl = href;
                console.log(this.bizUrl, "this.bizUrl");
              }
            }
          }
        } else {
          this.$message.error(res.message || "失败");
        }
      });

      }
     
      // 获取历史表格数据
      this.getTableHistoryData(this.businessKey, this.processInstanceId);
      // 获取任务进度图
      this.getProcessInstanceRunningView(
        this.businessKey,
        this.processInstanceId
      );
      this.activeName = this.saveTitles.activeName;
    },
    taskCommentVaild(rule, value, callback) {
      if (this.saveForm.resultFlag === "0") {
        if (value === "") {
          callback(new Error("当审批意见为驳回时，备注不能为空"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },
    getTableHistoryData(businessKey, processInstanceId) {
      const data = {
        businessKey: businessKey,
        processInstanceId: processInstanceId,
      };
      workflow.histTaskList(data).then((res) => {
        if (res.code == 200) {
          this.tableDataHistory = res.datas;
        } else {
          this.$message.error(res.message || "失败");
        }
      });
    },
    getProcessInstanceRunningView(businessKey, processInstanceId) {
      const data = {
        businessKey: businessKey,
        processInstanceId: processInstanceId,
      };
      workflow.processInstanceRunningView(data).then((res) => {
        if (res.code == 200) {
          this.imgSrc = res.data;
        } else {
          this.$message.error(res.message || "失败");
        }
      });
    },

    // 修改审批意见
    changeResultFlag(val) {
      this.saveForm.taskComment = "";
      this.saveForm.userName = [];
      this.saveForm.userNameString = "";
      this.saveForm.forward = "";
    },
    // 点击评审按钮
    approverBtn() {
      this.approverVisible = true;
    },
    // 获取用户列表
    showAddresseeList() {
      if (!this.saveForm.forward) {
        this.$message.warning("请先选择流转节点");
        return;
      }
      this.approverVisible = true;
      setTimeout(() => {
        this.$refs.approverTable.init(this.rowData, this.saveForm.forward);
      }, 30);
    },
    approverClose() {
      this.approverVisible = false;
    },
    approverEvent(val) {
      this.approverVisible = false;
      const arr = val.map((v) => v.userName);
      this.saveForm.userName = arr;
      this.saveForm.userNameString = this.saveForm.userName.toString();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
